<template>
    <!--明细-->
    <div>
        <div style="margin-left: 20px" class="mt-print-detail" v-for="(item,index) in OList">
            <div>
                <img style="margin-top:20px;width:800px;height:300px;" v-bind:src="pic" alt="">   
            </div>
            <div style="margin-bottom: 10px;margin-top: -30px;position:relative">
                <i v-show="'ZC' === form.planType" style="margin-left: 290px;font-weight: 900;">__________</i>
                <p v-show="'ZC' === form.planType" style="margin-left: 290px;font-weight: 900;position:absolute;top:5px;">(inward/outward)</p>
                <i v-show="'XC' === form.planType" style="margin-left: 360px;font-weight: 900;">__________</i>
                <p v-show="'XC' === form.planType" style="margin-left: 360px;font-weight: 900;position:absolute;top:5px;left:-60px;">(inward/outward)</p>
            </div>
            <div style="display: flex;margin-left: 10px;margin-top: 11px;">
                <span style="width: 200px">
                    Vessel:<span style="display: inline-block;width:150px;border-bottom: 1px solid #000;text-align: center;">{{ form.shipName }}</span>
                </span>
                <span style="width: 180px">
                    Voy.No.<span style="display: inline-block;width:130px;border-bottom: 1px solid #000;text-align: center;">{{ form.voyage }}</span>
                </span>
                <span style="width: 160px">
                    Berth<span style="display: inline-block;width:120px;border-bottom: 1px solid #000;text-align: center;">{{ form.portName }}</span>
                </span>
                <span style="width: 175px">
                    Hatch/BAY No.<span style="display: inline-block;width:82px;border-bottom: 1px solid #000;text-align: center;">{{index+1}}</span>
                </span>
            </div>
            <div style="display: flex;margin-top: 5px;margin-left:10px">
                <!-- <span style="width: 150px"></span> -->
                <span style="width: 240px">
                    Working time from<span style="display: inline-block;width:120px;border-bottom: 1px solid #000;text-align: center;">{{ form.startTime }}</span>
                </span>
                <span style="width: 162px">
                    Hrs.to<span style="display: inline-block;width:120px;border-bottom: 1px solid #000;text-align: center;">{{ form.endTime }}</span>
                </span>
                <span style="width: 160px">
                    Hrs.<span style="display: inline-block;width:120px;border-bottom: 1px solid #000;text-align: center;">{{ form.month }}-</span>  
                </span>
                <span style="width: 154px">
                    20<span style="display: inline-block;width:136px;border-bottom: 1px solid #000;text-align: center;">{{ form.year | filterYear }}</span>
                </span>
            </div>
            <div class="print-warp mt-45" style="max-width: 560px;margin-left:15px;height: 512px;flex-direction: column;margin-top: 19px;">
                <div style="height: 520px;max-width: 560px;float: left">
                    <div style="min-width: 280px">
                        <div class="print-flex" style="height: 32px;line-height: 32px">
                            <div style="width: 120px;border:1px solid #000;text-align:center;">Container No.</div>
                            <!--铅封大于10位,字体要减小-->
                            <div style="width: 88px;border:1px solid #000;text-align:center;"><div style="width: 75px;font-size: 10px;word-wrap: break-word;word-break: break-all;overflow: hidden;line-height: 10px;display: inline-block;">Seal</div></div>
                            <div style="width: 60px;border:1px solid #000;text-align:center;">Size</div>
                            <div style="width: 80px;overflow: hidden;;border:1px solid #000;text-align:center;"><span>F</span><span>/E</span></div>
                        </div>
                    </div>
                    <div v-for="(i,l) in item" style="min-width: 280px">
                        <div v-if="l<15" class="print-flex" style="height: 32px;line-height: 32px">
                            <div style="width: 120px;border:1px solid #000;text-align:center;">{{ i.containerId }}</div>
                            <!--铅封大于10位,字体要减小-->
                            <div style="width: 88px;border:1px solid #000;text-align:center;"><div style="width: 75px;font-size: 10px;word-wrap: break-word;word-break: break-all;overflow: hidden;line-height: 10px;display: inline-block;">{{ i.sealNo }}</div></div>
                            <div style="width: 60px;border:1px solid #000;text-align:center;">{{ i.containerSize }}</div>
                            <div style="width: 80px;overflow: hidden;border:1px solid #000;text-align:center;">{{ i.ef }}<span v-if="i.containerType != 'GP'"><span v-if="i.ef">/</span>{{ i.containerType }}</span><span v-if="i.tallyRemark != null">/{{i.tallyRemark}}</span></div>
                        </div>
                    </div>
                    <!-- <div v-if="item.length<15" v-for="it in (15-item.length)" class="print-flex" style="height: 32px;line-height: 32px">
                        <div style="width: 120px;border:1px solid #000;text-align:center;"></div>
                        <div style="width: 88px;border:1px solid #000;text-align:center;"></div>
                        <div style="width: 60px;border:1px solid #000;text-align:center;"></div>
                        <div style="width: 80px;overflow: hidden;border:1px solid #000;text-align:center;"></div>
                    </div> -->
                </div>
                <div style="height: 500px;max-width: 560px;float: left;margin-left: 0px;">
                    <div style="min-width: 280px" v-if="item.length>15">
                        <div class="print-flex" style="height: 32px;line-height: 32px">
                            <div style="width: 120px;border:1px solid #000;text-align:center;">Container No.</div>
                            <!--铅封大于10位,字体要减小-->
                            <div style="width: 88px;border:1px solid #000;text-align:center;"><div style="width: 75px;font-size: 10px;word-wrap: break-word;word-break: break-all;overflow: hidden;line-height: 10px;display: inline-block;">Seal</div></div>
                            <div style="width: 60px;border:1px solid #000;text-align:center;">Size</div>
                            <div style="width: 80px;overflow: hidden;;border:1px solid #000;text-align:center;"><span>F</span><span>/E</span></div>
                        </div>
                    </div>
                    <div v-for="(i,l) in item" style="min-width: 280px">
                        <div v-if="l>14" class="print-flex" style="height: 32px;line-height: 32px">
                            <div style="width: 120px;border:1px solid #000;text-align:center;">{{ i.containerId }}</div>
                            <!--铅封大于10位,字体要减小-->
                            <div style="width: 88px;border:1px solid #000;text-align:center;"><div style="width: 75px;font-size: 10px;word-wrap: break-word;word-break: break-all;overflow: hidden;line-height: 10px;display: inline-block;">{{ i.sealNo }}</div></div>
                            <div style="width: 60px;border:1px solid #000;text-align:center;">{{ i.containerSize }}</div>
                            <div style="width: 80px;overflow: hidden;border:1px solid #000;text-align:center;">{{ i.ef }}<span v-if="i.containerType != 'GP'"><span v-if="i.ef">/</span>{{ i.containerType }}</span><span v-if="i.tallyRemark != null">/{{i.tallyRemark}}</span></div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="margin-top: 0px;margin-left: 15px;" class="print-flex">
                <div style="display:flex">
                    <span style="display:inline-block;border:1px solid #000;height: 45px;line-height: 45px;width: 120px;">Remark:</span>
                    <span style="display:inline-block;border:1px solid #000;width: 233px;height: 45px;line-height: 45px;">{{ form.remark }}</span>
                </div>
                <div style="display:flex">
                    <span style="display:inline-block;border:1px solid #000;height: 45px;line-height: 45px;width: 120px;">Grand total:</span>
                    <div style="display:inline-block;border:1px solid #000;height: 45px;line-height: 45px;width: 233px;">
                        {{ item[0].E20===0 ? "" : (item[0].E20+'*20E') }}  
                        {{ item[0].E40===0 ? "" : (item[0].E40+'*40E') }} 
                        {{ item[0].E45===0 ? "" : (item[0].E45+'*45E') }} 
                        {{ item[0].F20===0?"":(item[0].F20+'*20F') }}  
                        {{ item[0].F40===0?"":(item[0].F40+ '*40F')}}
                        {{ item[0].F45===0?"":(item[0].F45+ '*45F')}} 
                    </div>
                </div>
            </div>
            <div style="margin-left: 150px"></div>
            <div class="mt-35" style="margin-left: 160px;margin-top: 72px;margin-bottom:100px;" :style="index!==list.length-1?'page-break-after: always':''">
                <div style="width:300px;display:inline-block;">
                    Tally Clerk:<br/>
                    CT-FORM-10 <span style="display:inline-block;border-bottom:1px solid #000;width:150px;">{{ ctallyClerk }}</span>
                </div>
                <div style="width:300px;display:inline-block;">
                    Counterpart:  <span style="display:inline-block;border-bottom:1px solid #000;width:150px;"></span>
                </div>
            </div>
        </div>
        <div style="page-break-after:always"></div>
        <div style="margin-left: 20px" class="mt-print-detail" v-for="(item,index) in IList">
            <div>
                <img style="margin-top:20px;width:800px;height:300px;" v-bind:src="pic" alt="">   
            </div>
             <div style="margin-bottom: 10px;margin-top: -30px;position:relative">
                <i v-show="'ZC' === form.planType" style="margin-left: 290px;font-weight: 900;">__________</i>
                <p v-show="'ZC' === form.planType" style="margin-left: 290px;font-weight: 900;position:absolute;top:5px;">(inward/outward)</p>
                <i v-show="'XC' === form.planType" style="margin-left: 360px;font-weight: 900;">__________</i>
                <p v-show="'XC' === form.planType" style="margin-left: 360px;font-weight: 900;position:absolute;top:5px;left:-60px;">(inward/outward)</p>
            </div>
            <div style="display: flex;margin-left: 10px;margin-top: 11px;">
                <span style="width: 200px">
                    Vessel:<span style="display: inline-block;width:150px;border-bottom: 1px solid #000;text-align: center;">{{ form.shipName }}</span>
                </span>
                <span style="width: 180px">
                    Voy.No.<span style="display: inline-block;width:130px;border-bottom: 1px solid #000;text-align: center;">{{ form.voyage }}</span>
                </span>
                <span style="width: 160px">
                    Berth<span style="display: inline-block;width:120px;border-bottom: 1px solid #000;text-align: center;">{{ form.portName }}</span>
                </span>
                <span style="width: 175px">
                    Hatch/BAY No.<span style="display: inline-block;width:82px;border-bottom: 1px solid #000;text-align: center;">{{index+1}}</span>
                </span>
            </div>
            <div style="display: flex;margin-top: 5px">
                <span style="width: 240px">
                    Working time from<span style="display: inline-block;width:120px;border-bottom: 1px solid #000;text-align: center;">{{ form.startTime }}</span>
                </span>
                <span style="width: 162px">
                    Hrs.to<span style="display: inline-block;width:120px;border-bottom: 1px solid #000;text-align: center;">{{ form.endTime }}</span>
                </span>
                <span style="width: 160px">
                    Hrs.<span style="display: inline-block;width:120px;border-bottom: 1px solid #000;text-align: center;">{{ form.month }}-</span>  
                </span>
                <span style="width: 154px">
                    20<span style="display: inline-block;width:136px;border-bottom: 1px solid #000;text-align: center;">{{ form.year | filterYear }}</span>
                </span>
            </div>
            <div class="print-warp mt-45" style="max-width: 560px;margin-left:15px;height: 520px;flex-direction: column;margin-top: 19px;">
                <div style="height: 500px;max-width: 560px;float: left;margin-left: 0px;">
                    <div style="min-width: 280px">
                        <div class="print-flex" style="height: 32px;line-height: 32px">
                            <div style="width: 120px;border:1px solid #000;text-align:center;">Container No.</div>
                            <!--铅封大于10位,字体要减小-->
                            <div style="width: 88px;border:1px solid #000;text-align:center;"><div style="width: 75px;font-size: 10px;word-wrap: break-word;word-break: break-all;overflow: hidden;line-height: 10px;display: inline-block;">Seal</div></div>
                            <div style="width: 60px;border:1px solid #000;text-align:center;">Size</div>
                            <div style="width: 80px;overflow: hidden;;border:1px solid #000;text-align:center;"><span>F</span><span>/E</span></div>
                        </div>
                    </div>
                    <div v-for="(i,l) in item" style="min-width: 280px">
                        <div v-if="l<15" class="print-flex" style="height: 32px;line-height: 32px">
                            <div style="width: 120px;border:1px solid #000;text-align:center;">{{ i.containerId }}</div>
                            <!--铅封大于10位,字体要减小-->
                            <div style="width: 88px;border:1px solid #000;text-align:center;"><div style="width: 75px;font-size: 10px;word-wrap: break-word;word-break: break-all;overflow: hidden;line-height: 10px;display: inline-block;">{{ i.sealNo }}</div></div>
                            <div style="width: 60px;border:1px solid #000;text-align:center;">{{ i.containerSize }}</div>
                            <div style="width: 80px;overflow: hidden;border:1px solid #000;text-align:center;">{{ i.ef }}<span v-if="i.containerType != 'GP'"><span v-if="i.ef">/</span>{{ i.containerType }}</span><span v-if="i.tallyRemark != null">/{{i.tallyRemark}}</span></div>
                        </div>
                    </div>
                </div>
                <div style="height: 500px;max-width: 560px;float: left">
                    <div style="min-width: 280px" v-if="item.length>14">
                        <div class="print-flex" style="height: 32px;line-height: 32px">
                            <div style="width: 120px;border:1px solid #000;text-align:center;">Container No.</div>
                            <!--铅封大于10位,字体要减小-->
                            <div style="width: 88px;border:1px solid #000;text-align:center;"><div style="width: 75px;font-size: 10px;word-wrap: break-word;word-break: break-all;overflow: hidden;line-height: 10px;display: inline-block;">Seal</div></div>
                            <div style="width: 60px;border:1px solid #000;text-align:center;">Size</div>
                            <div style="width: 80px;overflow: hidden;;border:1px solid #000;text-align:center;"><span>F</span><span>/E</span></div>
                        </div>
                    </div>
                    <div v-for="(i,l) in item" style="min-width: 280px">
                        <div v-if="l>14" class="print-flex" style="height: 32px;line-height: 32px">
                            <div style="width: 120px;border:1px solid #000;text-align:center;">{{ i.containerId }}</div>
                            <!--铅封大于10位,字体要减小-->
                            <div style="width: 88px;border:1px solid #000;text-align:center;"><div style="width: 75px;font-size: 10px;word-wrap: break-word;word-break: break-all;overflow: hidden;line-height: 10px;display: inline-block;">{{ i.sealNo }}</div></div>
                            <div style="width: 50px;border:1px solid #000;text-align:center;">{{ i.containerSize }}</div>
                            <div style="width: 80px;overflow: hidden;border:1px solid #000;text-align:center;">{{ i.ef }}<span v-if="i.containerType != 'GP'"><span v-if="i.ef">/</span>{{ i.containerType }}</span><span v-if="i.tallyRemark != null">/{{i.tallyRemark}}</span></div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="margin-top: -8px;margin-left: 15px;" class="print-flex">
                <div style="display:flex">
                    <span style="display:inline-block;border:1px solid #000;height: 45px;line-height: 45px;width: 120px;">Remark:</span>
                    <span style="display:inline-block;border:1px solid #000;width: 233px;height: 45px;line-height: 45px;">{{ form.remark }}</span>
                </div>
                <div style="display:flex">
                    <span style="display:inline-block;border:1px solid #000;height: 45px;line-height: 45px;width: 120px;">Grand total:</span>
                    <div style="display:inline-block;border:1px solid #000;height: 45px;line-height: 45px;width: 233px;">
                        {{ item[0].E20===0 ? "" : (item[0].E20+'*20E') }}  
                        {{ item[0].E40===0 ? "" : (item[0].E40+'*40E') }} 
                        {{ item[0].E45===0 ? "" : (item[0].E45+'*45E') }} 
                        {{ item[0].F20===0?"":(item[0].F20+'*20F') }}  
                        {{ item[0].F40===0?"":(item[0].F40+ '*40F')}}
                        {{ item[0].F45===0?"":(item[0].F45+ '*45F')}} 
                    </div>
                </div>
            </div>
            <div style="margin-left: 150px">内贸</div>
            <div class="mt-35" style="margin-left: 160px;margin-top: 62px;margin-bottom:100px;" :style="index!==list.length-1?'page-break-after: always':''">
                <div style="width:300px;display:inline-block;">
                    Tally Clerk:<br/>
                    CT-FORM-10 <span style="display:inline-block;border-bottom:1px solid #000;width:150px;">{{ ctallyClerk }}</span>
                </div>
                <div style="width:300px;display:inline-block;">
                    Counterpart:  <span style="display:inline-block;border-bottom:1px solid #000;width:150px;"></span>
                </div>
            </div>
        </div>
        <div style="page-break-after:always"></div>
        <div style="margin-left: 20px" class="mt-print-detail" v-for="(item,index) in OSList">
            <div>
                <img style="margin-top:20px;width:800px;height:280px;" v-bind:src="pic" alt="">    
            </div>
            <div style="margin-bottom: 10px;margin-top: -40px;position:relative">
                <i v-show="'ZC' === form.planType" style="margin-left: 290px;font-weight: 900;">__________</i>
                <p v-show="'ZC' === form.planType" style="margin-left: 290px;font-weight: 900;position:absolute;top:5px;">(inward/outward)</p>
                <i v-show="'XC' === form.planType" style="margin-left: 360px;font-weight: 900;">__________</i>
                <p v-show="'XC' === form.planType" style="margin-left: 360px;font-weight: 900;position:absolute;top:5px;left:-60px;">(inward/outward)</p>
            </div>
            <div style="display: flex;margin-left: 10px;margin-top: 11px;">
                <span style="width: 200px">
                    Vessel:<span style="display: inline-block;width:150px;border-bottom: 1px solid #000;text-align: center;">{{ form.shipName }}</span>
                </span>
                <span style="width: 180px">
                    Voy.No.<span style="display: inline-block;width:130px;border-bottom: 1px solid #000;text-align: center;">{{ form.voyage }}</span>
                </span>
                <span style="width: 160px">
                    Berth<span style="display: inline-block;width:120px;border-bottom: 1px solid #000;text-align: center;">{{ form.portName }}</span>
                </span>
                <span style="width: 175px">
                    Hatch/BAY No.<span style="display: inline-block;width:82px;border-bottom: 1px solid #000;text-align: center;">{{index+1}}</span>
                </span>
            </div>
            <div style="display: flex;margin-top: 5px">
                <span style="width: 240px">
                    Working time from<span style="display: inline-block;width:120px;border-bottom: 1px solid #000;text-align: center;">{{ form.startTime }}</span>
                </span>
                <span style="width: 162px">
                    Hrs.to<span style="display: inline-block;width:120px;border-bottom: 1px solid #000;text-align: center;">{{ form.endTime }}</span>
                </span>
                <span style="width: 160px">
                    Hrs.<span style="display: inline-block;width:120px;border-bottom: 1px solid #000;text-align: center;">{{ form.month }}-</span>  
                </span>
                <span style="width: 154px">
                    20<span style="display: inline-block;width:136px;border-bottom: 1px solid #000;text-align: center;">{{ form.year | filterYear }}</span>
                </span>
            </div>
            <div class="print-warp mt-45" style="max-width: 560px;margin-left:15px;height: 520px;flex-direction: column;margin-top: 19px;">
                <div style="min-width: 280px">
                    <div class="print-flex" style="height: 32px;line-height: 32px">
                        <div style="width: 120px;border:1px solid #000;text-align:center;">Container No.</div>
                        <!--铅封大于10位,字体要减小-->
                        <div style="width: 88px;border:1px solid #000;text-align:center;"><div style="width: 75px;font-size: 10px;word-wrap: break-word;word-break: break-all;overflow: hidden;line-height: 10px;display: inline-block;">Seal</div></div>
                        <div style="width: 60px;border:1px solid #000;text-align:center;">Size</div>
                        <div style="width: 80px;overflow: hidden;;border:1px solid #000;text-align:center;"><span>F</span><span>/E</span></div>
                    </div>
                </div>
                <div style="height: 500px;max-width: 560px;float: left">
                    <div v-for="(i,l) in item" style="min-width: 280px">
                        <div v-if="l<15" class="print-flex" style="height: 32px;line-height: 32px">
                            <div style="width: 120px;border:1px solid #000;text-align:center;">{{ i.containerId }}</div>
                            <!--铅封大于10位,字体要减小-->
                            <div style="width: 95px;border:1px solid #000;text-align:center;"><div style="width: 75px;font-size: 10px;word-wrap: break-word;word-break: break-all;overflow: hidden;line-height: 10px;display: inline-block;">{{ i.sealNo }}</div></div>
                            <div style="width: 60px;border:1px solid #000;text-align:center;">{{ i.containerSize }}</div>
                            <div style="width: 80px;overflow: hidden;border:1px solid #000;text-align:center;">{{ i.ef }}<span v-if="i.containerType != 'GP'"><span v-if="i.ef">/</span>{{ i.containerType }}</span><span v-if="i.tallyRemark != null">/{{i.tallyRemark}}</span></div>
                        </div>
                    </div>
                </div>
                <div style="height: 520px;max-width: 560px;float: left;margin-left: 0px;">
                    <div style="min-width: 280px" v-if="item.length>14">
                        <div class="print-flex" style="height: 32px;line-height: 32px">
                            <div style="width: 120px;border:1px solid #000;text-align:center;">Container No.</div>
                            <!--铅封大于10位,字体要减小-->
                            <div style="width: 88px;border:1px solid #000;text-align:center;"><div style="width: 75px;font-size: 10px;word-wrap: break-word;word-break: break-all;overflow: hidden;line-height: 10px;display: inline-block;">Seal</div></div>
                            <div style="width: 60px;border:1px solid #000;text-align:center;">Size</div>
                            <div style="width: 80px;overflow: hidden;;border:1px solid #000;text-align:center;"><span>F</span><span>/E</span></div>
                        </div>
                    </div>
                    <div v-for="(i,l) in item" style="min-width: 280px">
                        <div v-if="l>14" class="print-flex" style="height: 32px;line-height: 32px">
                            <div style="width: 120px;border:1px solid #000;text-align:center;">{{ i.containerId }}</div>
                            <!--铅封大于10位,字体要减小-->
                            <div style="width: 88px;border:1px solid #000;text-align:center;"><div style="width: 75px;font-size: 10px;word-wrap: break-word;word-break: break-all;overflow: hidden;line-height: 10px;display: inline-block;">{{ i.sealNo }}</div></div>
                            <div style="width: 50px;border:1px solid #000;text-align:center;">{{ i.containerSize }}</div>
                            <div style="width: 80px;overflow: hidden;border:1px solid #000;text-align:center;">{{ i.ef }}<span v-if="i.containerType != 'GP'"><span v-if="i.ef">/</span>{{ i.containerType }}</span><span v-if="i.tallyRemark != null">/{{i.tallyRemark}}</span></div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="margin-top: -8px;margin-left: 15px;" class="print-flex">
                <div style="display:flex">
                    <span style="display:inline-block;border:1px solid #000;height: 45px;line-height: 45px;width: 120px;">Remark:</span>
                    <span style="display:inline-block;border:1px solid #000;width: 233px;height: 45px;line-height: 45px;">{{ form.remark }}</span>
                </div>
                <div style="display:flex">
                    <span style="display:inline-block;border:1px solid #000;height: 45px;line-height: 45px;width: 120px;">Grand total:</span>
                    <div style="display:inline-block;border:1px solid #000;height: 45px;line-height: 45px;width: 233px;">
                        {{ item[0].E20===0 ? "" : (item[0].E20+'*20E') }}  
                        {{ item[0].E40===0 ? "" : (item[0].E40+'*40E') }} 
                        {{ item[0].E45===0 ? "" : (item[0].E45+'*45E') }} 
                        {{ item[0].F20===0?"":(item[0].F20+'*20F') }}  
                        {{ item[0].F40===0?"":(item[0].F40+ '*40F')}}
                        {{ item[0].F45===0?"":(item[0].F45+ '*45F')}} 
                    </div>
                </div>
            </div>
            <div style="margin-left: 150px">水转水外贸</div>
            <div class="mt-35" style="margin-left: 160px;margin-top: 72px;" :style="index!==list.length-1?'page-break-after: always':''">
                <div style="width:300px;display:inline-block;">
                    Tally Clerk:<br/>
                    CT-FORM-10 <span style="display:inline-block;border-bottom:1px solid #000;width:150px;">{{ ctallyClerk }}</span>
                </div>
                <div style="width:300px;display:inline-block;">
                    Counterpart:  <span style="display:inline-block;border-bottom:1px solid #000;width:150px;"></span>
                </div>
            </div>
        </div>
        <div style="page-break-after:always"></div>
        <div style="margin-left: 20px" class="mt-print-detail" v-for="(item,index) in ISList">
            <div>
                <img style="margin-top:20px;width:800px;height:300px;" v-bind:src="pic" alt="">   
            </div>
            <div style="margin-bottom: 10px;margin-top: -30px;position:relative">
                <i v-show="'ZC' === form.planType" style="margin-left: 290px;font-weight: 900;">__________</i>
                <p v-show="'ZC' === form.planType" style="margin-left: 290px;font-weight: 900;position:absolute;top:5px;">(inward/outward)</p>
                <i v-show="'XC' === form.planType" style="margin-left: 360px;font-weight: 900;">__________</i>
                <p v-show="'XC' === form.planType" style="margin-left: 360px;font-weight: 900;position:absolute;top:5px;left:-60px;">(inward/outward)</p>
            </div>
            <div style="display: flex;margin-left: 10px;margin-top: 11px;">
                <span style="width: 200px">
                    Vessel:<span style="display: inline-block;width:150px;border-bottom: 1px solid #000;text-align: center;">{{ form.shipName }}</span>
                </span>
                <span style="width: 180px">
                    Voy.No.<span style="display: inline-block;width:130px;border-bottom: 1px solid #000;text-align: center;">{{ form.voyage }}</span>
                </span>
                <span style="width: 160px">
                    Berth<span style="display: inline-block;width:120px;border-bottom: 1px solid #000;text-align: center;">{{ form.portName }}</span>
                </span>
                <span style="width: 175px">
                    Hatch/BAY No.<span style="display: inline-block;width:82px;border-bottom: 1px solid #000;text-align: center;">{{index+1}}</span>
                </span>
            </div>
            <div style="display: flex;margin-top: 5px">
                <span style="width: 240px">
                    Working time from<span style="display: inline-block;width:120px;border-bottom: 1px solid #000;text-align: center;">{{ form.startTime }}</span>
                </span>
                <span style="width: 162px">
                    Hrs.to<span style="display: inline-block;width:120px;border-bottom: 1px solid #000;text-align: center;">{{ form.endTime }}</span>
                </span>
                <span style="width: 160px">
                    Hrs.<span style="display: inline-block;width:120px;border-bottom: 1px solid #000;text-align: center;">{{ form.month }}-</span>  
                </span>
                <span style="width: 154px">
                    20<span style="display: inline-block;width:140px;border-bottom: 1px solid #000;text-align: center;">{{ form.year | filterYear }}</span>
                </span>
            </div>
            <div class="print-warp mt-45" style="max-width: 560px;margin-left:20px;height:520px;flex-direction: column;margin-top: 19px;">
                <div style="height: 500px;max-width: 560px;float: left;margin-left: -5px;">
                    <div style="min-width: 280px">
                        <div class="print-flex" style="height: 32px;line-height: 32px">
                            <div style="width: 120px;border:1px solid #000;text-align:center;">Container No.</div>
                            <!--铅封大于10位,字体要减小-->
                            <div style="width: 88px;border:1px solid #000;text-align:center;"><div style="width: 75px;font-size: 10px;word-wrap: break-word;word-break: break-all;overflow: hidden;line-height: 10px;display: inline-block;">Seal</div></div>
                            <div style="width: 60px;border:1px solid #000;text-align:center;">Size</div>
                            <div style="width: 80px;overflow: hidden;;border:1px solid #000;text-align:center;"><span>F</span><span>/E</span></div>
                        </div>
                    </div>
                    <div v-for="(i,l) in item" style="min-width: 280px">
                        <div v-if="l<15" class="print-flex" style="height: 32px;line-height: 32px">
                            <div style="width: 120px;border:1px solid #000;">{{ i.containerId }}</div>
                            <!--铅封大于10位,字体要减小-->
                            <div style="width: 88px;border:1px solid #000;text-align:center;"><div style="width: 75px;font-size: 10px;word-wrap: break-word;word-break: break-all;overflow: hidden;line-height: 10px;display: inline-block;">{{ i.sealNo }}</div></div>
                            <div style="width: 60px;border:1px solid #000;text-align:center;">{{ i.containerSize }}</div>
                            <div style="width: 80px;overflow: hidden;border:1px solid #000;text-align:center;">{{ i.ef }}<span v-if="i.containerType != 'GP'"><span v-if="i.ef">/</span>{{ i.containerType }}</span><span v-if="i.tallyRemark != null">/{{i.tallyRemark}}</span></div>
                        </div>
                    </div>
                </div>
                <div style="height: 500px;max-width: 560px;float: left">
                    <div style="min-width: 280px" v-if="item.length>14">
                        <div class="print-flex" style="height: 32px;line-height: 32px">
                            <div style="width: 120px;border:1px solid #000;text-align:center;">Container No.</div>
                            <!--铅封大于10位,字体要减小-->
                            <div style="width: 88px;border:1px solid #000;text-align:center;"><div style="width: 75px;font-size: 10px;word-wrap: break-word;word-break: break-all;overflow: hidden;line-height: 10px;display: inline-block;">Seal</div></div>
                            <div style="width: 60px;border:1px solid #000;text-align:center;">Size</div>
                            <div style="width: 80px;overflow: hidden;;border:1px solid #000;text-align:center;"><span>F</span><span>/E</span></div>
                        </div>
                    </div>
                    <div v-for="(i,l) in item" style="min-width: 280px">
                        <div v-if="l>14" class="print-flex" style="height: 32px;line-height: 32px">
                            <div style="width: 120px;border:1px solid #000;text-align:center;">{{ i.containerId }}</div>
                            <!--铅封大于10位,字体要减小-->
                            <div style="width: 88px;border:1px solid #000;text-align:center;"><div style="width: 75px;font-size: 10px;word-wrap: break-word;word-break: break-all;overflow: hidden;line-height: 10px;display: inline-block;">{{ i.sealNo }}</div></div>
                            <div style="width: 60px;border:1px solid #000;text-align:center;">{{ i.containerSize }}</div>
                            <div style="width: 80px;overflow: hidden;border:1px solid #000;text-align:center;">{{ i.ef }}<span v-if="i.containerType != 'GP'"><span v-if="i.ef">/</span>{{ i.containerType }}</span><span v-if="i.tallyRemark != null">/{{i.tallyRemark}}</span></div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="margin-top: -8px;margin-left: 15px;" class="print-flex">
                <div style="display:flex">
                    <span style="display:inline-block;border:1px solid #000;height: 45px;line-height: 45px;width: 120px;">Remark:</span>
                    <span style="display:inline-block;border:1px solid #000;width: 233px;height: 45px;line-height: 45px;">{{ form.remark }}</span>
                </div>
                <div style="display:flex">
                    <span style="display:inline-block;border:1px solid #000;height: 45px;line-height: 45px;width: 120px;">Grand total:</span>
                    <div style="display:inline-block;border:1px solid #000;height: 45px;line-height: 45px;width: 233px;">
                        {{ item[0].E20===0 ? "" : (item[0].E20+'*20E') }}  
                        {{ item[0].E40===0 ? "" : (item[0].E40+'*40E') }} 
                        {{ item[0].E45===0 ? "" : (item[0].E45+'*45E') }} 
                        {{ item[0].F20===0?"":(item[0].F20+'*20F') }}  
                        {{ item[0].F40===0?"":(item[0].F40+ '*40F')}}
                        {{ item[0].F45===0?"":(item[0].F45+ '*45F')}} 
                    </div>
                </div>
            </div>
            <div style="margin-left: 150px">水转水内贸</div>
            <div class="mt-35" style="margin-left: 160px;margin-top: 40px;margin-bottom:30px;" :style="index!==list.length-1?'page-break-after: always':''">
                <div style="width:300px;display:inline-block;">
                    Tally Clerk:<br/>
                    CT-FORM-10 <span style="display:inline-block;border-bottom:1px solid #000;width:150px;">{{ ctallyClerk }}</span>
                </div>
                <div style="width:300px;display:inline-block;">
                    Counterpart:  <span style="display:inline-block;border-bottom:1px solid #000;width:150px;"></span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { getShipPlanId, printingDetail } from "@/api/shipPlan/shipPlan";

    export default {
        name: "detailPrint",
        data() {
            return {
                form: {},
                list: [],
                OList:[],
                IList:[],
                OSList:[],
                ISList:[],
                page: 0,
                t: 0,
                u:0,
                ot: 0,
                iu:0,
                ctallyClerk: '',
                pic: require('../../../assets/img/print.jpg')
            }
        },
        created() {   
            this.$nextTick(function() {
                this.pic = require('../../../assets/img/print.jpg')
                this.$forceUpdate()
            })
            const id = this.$route.params.id
            const checked = this.$route.query.checked
            let dts = JSON.parse(localStorage.getItem('dDatas'))
            this.form = JSON.parse(localStorage.getItem('fDatas'))  
            this.getPrintDatas(id)
            if (this.form != null && this.form.startTime != ""){
                let startTime = this.form.startTime.split(":");
                let endTime = this.form.endTime.split(":");
                if (startTime[0].length < 2){
                    startTime[0] = "0"+startTime[0]
                }
                if (startTime[1].length < 2){
                    startTime[1] = "0"+startTime[1]
                }
                if (endTime[0].length < 2){
                    endTime[0] = "0"+endTime[0]
                }
                if (endTime[1].length < 2){
                    endTime[1] = "0"+endTime[1]
                }
                this.form.startTime = startTime[0]+":"+startTime[1]
                this.form.endTime = endTime[0] + ":" + endTime[1]
            }
            let ODts = [];
            let OSDts = [];
            let IDts = [];
            let ISDts = [];
            dts.forEach(el =>{
                if (el.tradeType === 'O'){
                    if (el.change == '0') {
                        ODts.push(el)
                    } else {
                        OSDts.push(el)
                    }
                } else {
                    if (el.change == '0') {
                        ISDts.push(el)
                    } else {
                        IDts.push(el)
                    }
                }
            })
            if (checked === 'true') {
                let d = ODts
                for(let i=0,len=d.length;i<len;i+=30){
                    this.OList.push(d.slice(i,i+30));
                }
                let e = IDts
                for(let i=0,len=e.length;i<len;i+=30){
                    this.IList.push(e.slice(i,i+30));
                }
                let od = OSDts
                for(let i=0,len=od.length;i<len;i+=30){
                    this.OSList.push(od.slice(i,i+30));
                }
                let ie = ISDts
                for(let i=0,len=ie.length;i<len;i+=30){
                    this.ISList.push(ie.slice(i,i+30));
                }
                this.t = this.OList.length
                let v = this.OList
                v.forEach(el =>{
                    el[0].E20=0
                    el[0].E40=0
                    el[0].F20=0
                    el[0].F40=0
                    el[0].E45=0
                    el[0].F45=0
                    el.forEach(ol =>{
                        if(ol.ef==='E'&&ol.containerSize==='20'){
                            el[0].E20++
                        }else if(ol.ef==='E'&&ol.containerSize==='40'){
                            el[0].E40++
                        }else if(ol.ef==='F'&&ol.containerSize==='20'){
                            el[0].F20++
                        }else if(ol.ef==='F'&&ol.containerSize==='40') {
                            el[0].F40++
                        }else if(ol.ef==='E'&&ol.containerSize==='45'){
                            el[0].E45++
                        }else if(ol.ef==='F'&&ol.containerSize==='45') {
                            el[0].F45++
                        }
                    })
                })
                if(this.OList.length> 0) {
                    for(var c=0;c<this.OList.length;c++) {
                        if(this.OList[c].length <30) {
                            let le = 30-this.OList[c].length
                            for(var it=0;it<le;it++) {
                                this.OList[c].push({id:it})
                            }   
                        }
                    }
                }
                this.ot = this.OSList.length
                let ov = this.OSList
                ov.forEach(el =>{
                    el[0].E20=0
                    el[0].E40=0
                    el[0].F20=0
                    el[0].F40=0
                    el[0].E45=0
                    el[0].F45=0
                    el.forEach(ol =>{
                        if(ol.ef==='E'&&ol.containerSize==='20'){
                            el[0].E20++
                        }else if(ol.ef==='E'&&ol.containerSize==='40'){
                            el[0].E40++
                        }else if(ol.ef==='F'&&ol.containerSize==='20'){
                            el[0].F20++
                        }else if(ol.ef==='F'&&ol.containerSize==='40') {
                            el[0].F40++
                        }else if(ol.ef==='E'&&ol.containerSize==='45'){
                            el[0].E45++
                        }else if(ol.ef==='F'&&ol.containerSize==='45') {
                            el[0].F45++
                        }
                    })
                })
                if(this.OSList.length> 0) {
                    for(var c=0;c<this.OSList.length;c++) {
                        if(this.OSList[c].length <30) {
                            let le = 30-this.OSList[c].length
                            for(var it=0;it<le;it++) {
                                this.OSList[c].push({id:it})
                            }   
                        }
                    }
                }
                this.u = this.IList.length
                let w = this.IList
                w.forEach(el =>{
                    el[0].E20=0
                    el[0].E40=0
                    el[0].F20=0
                    el[0].F40=0
                    el[0].E45=0
                    el[0].F45=0
                    el.forEach(ol =>{
                        if(ol.ef==='E'&&ol.containerSize==='20'){
                            el[0].E20++
                        }else if(ol.ef==='E'&&ol.containerSize==='40'){
                            el[0].E40++
                        }else if(ol.ef==='F'&&ol.containerSize==='20'){
                            el[0].F20++
                        }else if(ol.ef==='F'&&ol.containerSize==='40') {
                            el[0].F40++
                        }else if(ol.ef==='E'&&ol.containerSize==='45'){
                            el[0].E45++
                        }else if(ol.ef==='F'&&ol.containerSize==='45') {
                            el[0].F45++
                        }
                    })
                })
                if(this.IList.length> 0) {
                    for(var c=0;c<this.IList.length;c++) {
                        if(this.IList[c].length <30) {
                            let le = 30-this.IList[c].length
                            for(var it=0;it<le;it++) {
                                this.IList[c].push({id:it})
                            }   
                        }
                    }
                }
                this.iu = this.ISList.length
                let iw = this.ISList
                iw.forEach(el =>{
                    el[0].E20=0
                    el[0].E40=0
                    el[0].F20=0
                    el[0].F40=0
                    el[0].E45=0
                    el[0].F45=0
                    el.forEach(ol =>{
                        if(ol.ef==='E'&&ol.containerSize==='20'){
                            el[0].E20++
                        }else if(ol.ef==='E'&&ol.containerSize==='40'){
                            el[0].E40++
                        }else if(ol.ef==='F'&&ol.containerSize==='20'){
                            el[0].F20++
                        }else if(ol.ef==='F'&&ol.containerSize==='40') {
                            el[0].F40++
                        }else if(ol.ef==='E'&&ol.containerSize==='45'){
                            el[0].E45++
                        }else if(ol.ef==='F'&&ol.containerSize==='45') {
                            el[0].F45++
                        }
                    })
                })
                if(this.ISList.length> 0) {
                    for(var c=0;c<this.ISList.length;c++) {
                        if(this.ISList[c].length <30) {
                            let le = 30-this.ISList[c].length
                            for(var it=0;it<le;it++) {
                                this.ISList[c].push({id:it})
                            }   
                        }
                    }
                }
                this.page = this.t           
                this.$nextTick(() => {
                    setTimeout(function() {
                    window.print()
                    window.close()
                    },1000)
                })
            } else {
                let d = ODts
                for(let i=0,len=d.length;i<len;i+=30){
                    this.OList.push(d.slice(i,i+30));
                }
                let e = IDts
                for(let i=0,len=e.length;i<len;i+=30){
                    this.IList.push(e.slice(i,i+30));
                }
                let od = OSDts
                for(let i=0,len=od.length;i<len;i+=30){
                    this.OSList.push(od.slice(i,i+30));
                }
                let ie = ISDts
                for(let i=0,len=ie.length;i<len;i+=30){
                    this.ISList.push(ie.slice(i,i+30));
                }
                this.t = this.OList.length
                let v = this.OList
                ODts.forEach(el =>{
                    el[0].E20=0
                    el[0].E40=0
                    el[0].F20=0
                    el[0].F40=0
                    el[0].E45=0
                    el[0].F45=0
                    el.forEach(ol =>{
                        if(ol.ef==='E'&&ol.containerSize==='20'){
                            el[0].E20++
                        }else if(ol.ef==='E'&&ol.containerSize==='40'){
                            el[0].E40++
                        }else if(ol.ef==='F'&&ol.containerSize==='20'){
                            el[0].F20++
                        }else if(ol.ef==='F'&&ol.containerSize==='40') {
                            el[0].F40++
                        }else if(ol.ef==='E'&&ol.containerSize==='45'){
                            el[0].E45++
                        }else if(ol.ef==='F'&&ol.containerSize==='45') {
                            el[0].F45++
                        }
                    })
                })
                this.ot = this.OSList.length
                let ov = this.OSList
                ov.forEach(el =>{
                    el[0].E20=0
                    el[0].E40=0
                    el[0].F20=0
                    el[0].F40=0
                    el[0].E45=0
                    el[0].F45=0
                    el.forEach(ol =>{
                        if(ol.ef==='E'&&ol.containerSize==='20'){
                            el[0].E20++
                        }else if(ol.ef==='E'&&ol.containerSize==='40'){
                            el[0].E40++
                        }else if(ol.ef==='F'&&ol.containerSize==='20'){
                            el[0].F20++
                        }else if(ol.ef==='F'&&ol.containerSize==='40') {
                            el[0].F40++
                        }else if(ol.ef==='E'&&ol.containerSize==='45'){
                            el[0].E45++
                        }else if(ol.ef==='F'&&ol.containerSize==='45') {
                            el[0].F45++
                        }
                    })
                })
                this.u = this.IList.length
                let w = this.IList
                w.forEach(el =>{
                    el[0].E20=0
                    el[0].E40=0
                    el[0].F20=0
                    el[0].F40=0
                    el[0].E45=0
                    el[0].F45=0
                    el.forEach(ol =>{
                        if(ol.ef==='E'&&ol.containerSize==='20'){
                            el[0].E20++
                        }else if(ol.ef==='E'&&ol.containerSize==='40'){
                            el[0].E40++
                        }else if(ol.ef==='F'&&ol.containerSize==='20'){
                            el[0].F20++
                        }else if(ol.ef==='F'&&ol.containerSize==='40') {
                            el[0].F40++
                        }else if(ol.ef==='E'&&ol.containerSize==='45'){
                            el[0].E45++
                        }else if(ol.ef==='F'&&ol.containerSize==='45') {
                            el[0].F45++
                        }
                    })
                })
                this.iu = this.ISList.length
                let iw = this.ISList
                iw.forEach(el =>{
                    el[0].E20=0
                    el[0].E40=0
                    el[0].F20=0
                    el[0].F40=0
                     el[0].E45=0
                    el[0].F45=0
                    el.forEach(ol =>{
                        if(ol.ef==='E'&&ol.containerSize==='20'){
                            el[0].E20++
                        }else if(ol.ef==='E'&&ol.containerSize==='40'){
                            el[0].E40++
                        }else if(ol.ef==='F'&&ol.containerSize==='20'){
                            el[0].F20++
                        }else if(ol.ef==='F'&&ol.containerSize==='40') {
                            el[0].F40++
                        }else if(ol.ef==='E'&&ol.containerSize==='45'){
                            el[0].E45++
                        }else if(ol.ef==='F'&&ol.containerSize==='45') {
                            el[0].F45++
                        }
                    })
                })
                this.page = this.t
                this.$nextTick(() => {
                    setTimeout(function() {
                        window.print()
                        window.close()
                    },1000)
                })
            }
        },
        methods: {
            getPrintDatas(id,datas) {
                let that = this;
                printingDetail(id,datas).then(function(res) {
                    that.ctallyClerk = res.data.tallyClerk
                })
            },
            listSlice(index) {
                const i = index - 1
                if (this.list.length < 30) {
                    return this.list
                } else {
                    return this.list.slice(i * 30, (i + 1) * 30)
                }
            },
            getPage() {
                let page = this.list.length / 30
                if (page < 1) {
                    return 1
                } else if (page.toString().indexOf('.') > -1) {
                    return parseInt(page) + 1
                } else {
                    return page
                }
            }
        },
        filters: {
            filterYear(val) {
                if(val){
                    return (val + '') ? (val + '').substr(2, 3) : ''
                }else{
                    return ''
                }
            }
        }
    }
</script>

<style scoped>
    .mt-20 {
        margin-top: 20px;
    }

    .mt-32 {
        margin-top: 32px;
    }

    .mt-35 {
        margin-top: 35px;
    }

    .mt-40 {
        margin-top: 40px;
    }

    .mt-45 {
        margin-top: 25px;
    }

    .mt-50 {
        margin-top: 50px;
    }

    .mt-60 {
        margin-top: 60px;
    }

    .mt-70 {
        margin-top: 70px;
    }

    .mt-80 {
        margin-top: 80px;
    }

    .mt-85 {
        margin-top: 85px;
    }

    .mt-print {
        margin-top: 315px !important;
        font-size: 14px;
    }

    .mt-print-total {
        margin-top: 265px !important;
        font-size: 14px;
    }
    .page-next {
        page-break-after: always;
    }
    .mt-print-detail {
        padding-top: 10px !important;
        font-size: 14px;
    }

    .mt-print-damage {
        margin-top: 240px !important;
        font-size: 14px;
    }

    .mt-print-port {
        margin-top: 180px !important;
        font-size: 14px;
    }

    .print-flex {
        display: flex;
    }

    .print-warp {
        display: flex;
        flex-wrap: wrap;
    }

    .page-next {
        page-break-after: always;
    }

    .print-other-line {
        position: relative;
        width: 500px;
        box-sizing: border-box;
        border: 1px solid;
        line-height: 120px;
        text-indent: 5px;
    }

    .print-other-line::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 250px;
        box-sizing: border-box;
        border-bottom: 1px solid;
        transform-origin: bottom center;
        transform: rotateZ(-45deg) scale(1.414);
        animation: slash 5s infinite ease;
    }

    .set {
        width: 500px;
        background: #000;
        transform-origin: bottom center;
        transform: rotateZ(-45deg) scale(1.414);
        height: 1px;
    }
</style>
